<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Matrix Framework - 企业级多租户管理平台" />
    <meta name="keywords" content="Matrix Framework, 多租户, 企业管理, 微服务" />
    <meta name="author" content="Matrix Framework Team" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://matrix.com/" />
    <meta property="og:title" content="Matrix Framework - 企业级多租户管理平台" />
    <meta property="og:description" content="基于微服务架构的现代化企业级平台，提供完整的租户管理、用户系统、认证授权等功能" />
    <meta property="og:image" content="/matrix-framework-og.jpg" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://matrix.com/" />
    <meta property="twitter:title" content="Matrix Framework - 企业级多租户管理平台" />
    <meta property="twitter:description" content="基于微服务架构的现代化企业级平台，提供完整的租户管理、用户系统、认证授权等功能" />
    <meta property="twitter:image" content="/matrix-framework-twitter.jpg" />

    <title>Matrix Framework - 企业级多租户管理平台</title>

    <!-- Preconnect to external domains for performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />

    <!-- Theme Color for Mobile Browsers -->
    <meta name="theme-color" content="#3498db" />

    <!-- Apple Touch Icon -->
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

    <!-- Manifest for PWA -->
    <link rel="manifest" href="/manifest.json" />

    <style>
      /* Loading screen styles */
      #loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      }

      .loading-logo {
        width: 80px;
        height: 80px;
        background: white;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }

      .loading-text {
        color: white;
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 8px;
      }

      .loading-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        margin-bottom: 32px;
      }

      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        to { transform: rotate(360deg); }
      }

      @keyframes pulse {
        0%, 100% {
          opacity: 1;
        }
        50% {
          opacity: 0.8;
        }
      }

      /* Hide loading screen when app is ready */
      .app-loaded #loading-screen {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
      }

      /* Fallback styles */
      #app {
        min-height: 100vh;
      }

      .error-boundary {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 20px;
        text-align: center;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      }

      .error-title {
        font-size: 24px;
        font-weight: 600;
        color: #e74c3c;
        margin-bottom: 16px;
      }

      .error-message {
        font-size: 16px;
        color: #7f8c8d;
        margin-bottom: 24px;
        max-width: 400px;
      }

      .error-button {
        background-color: #3498db;
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s ease;
      }

      .error-button:hover {
        background-color: #2980b9;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- Loading Screen -->
      <div id="loading-screen">
        <div class="loading-logo">
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
            <rect width="48" height="48" rx="12" fill="#3498db"/>
            <path d="M12 24L20 32L36 16" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div class="loading-text">Matrix Framework</div>
        <div class="loading-subtitle">企业级多租户管理平台</div>
        <div class="loading-spinner"></div>
      </div>

      <!-- Error Boundary Fallback -->
      <noscript>
        <div class="error-boundary">
          <h1 class="error-title">需要启用 JavaScript</h1>
          <p class="error-message">
            Matrix Framework 需要 JavaScript 才能正常运行。
            请在浏览器中启用 JavaScript 并刷新页面。
          </p>
          <button class="error-button" onclick="window.location.reload()">
            刷新页面
          </button>
        </div>
      </noscript>
    </div>

    <script type="module" src="/src/main.ts"></script>

    <!-- App Loading Script -->
    <script>
      // Hide loading screen when app is ready
      window.addEventListener('load', function() {
        setTimeout(function() {
          document.documentElement.classList.add('app-loaded');

          // Remove loading screen after transition
          setTimeout(function() {
            const loadingScreen = document.getElementById('loading-screen');
            if (loadingScreen) {
              loadingScreen.remove();
            }
          }, 300);
        }, 500);
      });

      // Error handling
      window.addEventListener('error', function(e) {
        console.error('Application error:', e.error);
      });

      // Unhandled promise rejection
      window.addEventListener('unhandledrejection', function(e) {
        console.error('Unhandled promise rejection:', e.reason);
      });

      // Service Worker registration for PWA (if needed)
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('/sw.js')
            .then(function(registration) {
              console.log('SW registered: ', registration);
            })
            .catch(function(registrationError) {
              console.log('SW registration failed: ', registrationError);
            });
        });
      }
    </script>
  </body>
</html>